<template>
  <n-dropdown
      trigger="hover"
      @select="handleSelect"
      :show-arrow="true"
      :options="options"
  >
    <div class="user-info-box">
      <person-icon v-if="fallback"></person-icon>
      <n-avatar
          v-if="!fallback"
          round
          object-fit="cover"
          size="medium"
          :src="Person"
          @error="errorHandle"
      ></n-avatar>
    </div>
  </n-dropdown>

  <!-- 系统设置 model -->
  <go-system-set v-model:modelShow="modelShow"></go-system-set>
  <!-- 关于软件 model -->
  <go-system-info v-model:modelShow="modelShowInfo"></go-system-info>
</template>

<script lang="ts" setup>
import {h, onMounted, onUnmounted, ref} from 'vue'
import {NAvatar, NText} from 'naive-ui'
import {MessageSuccess, renderIcon} from '@/utils'
import {logout, renderLang} from '@/utils'
import {GoSystemSet} from '@/components/GoSystemSet/index'
import {GoSystemInfo} from '@/components/GoSystemInfo/index'
import Person from './person.png'

import {icon} from '@/plugins'
//@ts-ignore
import Utils from "@/vue2-flow/src/utils/Common.js";
//@ts-ignore
import {Emitter} from "@/utils/Emitter";
import {AppParams} from '@/utils/appParams'
import {ElLoading} from "element-plus";

const {
  ChatboxEllipsesIcon,
  PersonIcon,
  LogOutOutlineIcon,
  SettingsSharpIcon
} = icon.ionicons5

const t = window['$t']

const modelShowInfo = ref(false)
const modelShow = ref(false)

// 是否失败
const fallback = ref(false)

// 用户图标渲染
const renderUserInfo = () => {

  let Name = location.href.includes('/chart/preview/') ? "去登录" : '已授权'
  if (Utils.IsAuthentication()) {
    const UserInfo = Utils.GetLoginUserInfo()
    Name = UserInfo.name
  }
  return h(
      'div',
      {
        style: 'display: flex; align-items: center; padding: 8px 12px;',
        onClick: () => {
          LoginBtn()
        }
      },
      [
        h(NAvatar, {
          round: true,
          style: 'margin-right: 12px;cursor: pointer;',
          src: Person
        }),
        h('div', null, [
          h('div', null, [
            h(NText,
                {depth: 2, style: 'cursor: pointer;'},
                {default: () => Name})
          ])
        ])
      ]
  )
}
const options = ref([
  {
    label: '我的信息',
    key: 'info',
    type: 'render',
    render: renderUserInfo
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: renderLang('global.sys_set'),
    key: 'sysSet',
    icon: renderIcon(SettingsSharpIcon)
  },
  {
    label: renderLang('global.contact'),
    key: 'contact',
    icon: renderIcon(ChatboxEllipsesIcon)
  },
  {
    type: 'divider',
    key: 'd3'
  }
])
if (location.href.includes('/chart/preview/')) {
  if (Utils.IsAuthentication()) {
    options.value.push({
      label: renderLang('global.logout'),
      key: 'logout',
      icon: renderIcon(LogOutOutlineIcon)
    })
  }
} else {
  options.value.push({
    label: renderLang('global.logout'),
    key: 'logout',
    icon: renderIcon(LogOutOutlineIcon)
  })
}

// 图片渲染错误
const errorHandle = (e: Event) => {
  fallback.value = true
}

// 系统设置
const sysSetHandle = () => {
  modelShow.value = true
}

// 系统设置
const sysInfoHandle = () => {
  modelShowInfo.value = true
}

const LoginBtn = () => {
  if (!Utils.IsAuthentication()) {
    Emitter.emit(AppParams.JAVA_SCRIPT_EVENT.POST_MESSAGE_BUS,
        {MessageBusType: 'USER_LOGIN', name: 'USER_LOGIN', label: '登录', dialogWidth: '325px'})
  }
}

const handleSelect = (key: string) => {
  let loading = null as any
  switch (key) {
    case 'contact':
      sysInfoHandle()
      break
    case 'sysSet':
      sysSetHandle()
      break
    case 'logout':
      if (location.href.includes('/chart/preview/')) {
        options.value = options.value.filter(o => o.key !== 'logout')
        Utils.Logout()
      } else {
        logout()
      }
      MessageSuccess('退出成功！')
      loading = ElLoading.service({
        lock: true,
        text: '程序加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        loading?.close()
        location.reload()
      }, 2000)
      break
  }
}
const LoginSuccess = () => {
  if (location.href.includes('/chart/preview/')) {
    if (Utils.IsAuthentication()) {
      options.value.push({
        label: renderLang('global.logout'),
        key: 'logout',
        icon: renderIcon(LogOutOutlineIcon)
      })
    }
  }
}
onMounted(() => {
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN_SUCCEEDED, LoginSuccess)
})
onUnmounted(() => {
  Emitter.off(AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN_SUCCEEDED, LoginSuccess);
})
</script>

<style lang="scss" scoped>
.user-info-box {
  cursor: pointer;
  transform: scale(0.7);
}
</style>
